<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#f9f9f9', color: '#333' }"
      style="width: 80%; margin: 0 auto"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="aim" label="单位性质" width="80px">
      </el-table-column>
      <el-table-column
        prop="item"
        label=""
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column label="本科生">
        <el-table-column
          prop="bach_num"
          label="人数"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bac_percent"
          label="比例"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="硕士生">
        <el-table-column
          prop="mas_num"
          label="人数"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mas_percent"
          label="比例"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="总体">
        <el-table-column
          prop="sum_num"
          label="人数"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sum_percent"
          label="比例"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  <!-- </el-row> -->
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myStart", "myEnd"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      tableData: [],
    };
  },
  mounted() {},
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.get_direction(this.start, this.end);
      });
    } else {
      this.get_direction(this.start, this.end);
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 1) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else if (rowIndex === 4) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else if (rowIndex === 7) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    count_kind(data) {
      var com_nation = 0;
      var com_personal = 0;
      var com_three = 0;
      var arm = 0;
      var party = 0;
      var bus_high = 0;
      var bus_tech = 0;
      var bus_mid = 0;
      var bus_other = 0;
      var other = 0;
      var sum = 0;
      for (var i in data) {
        var cur = data[i]["term"];
        var num = data[i]["num"];
        if (cur == "国有企业") {
          com_nation += num;
        } else if (cur == "民营企业") {
          com_personal += num;
        } else if (cur == "三资企业") {
          com_three += num;
        } else if (cur == "部队") {
          arm += num;
        } else if (cur == "党政机关") {
          party += num;
        } else if (cur == "高等教育单位") {
          bus_high += num;
        } else if (cur == "科研设计单位") {
          bus_tech += num;
        } else if (cur == "中初教育单位") {
          bus_mid += num;
        } else if (cur == "其他事业单位") {
          bus_other += num;
        } else {
          other += num;
        }
        sum += num;
      }
      // 针对大类进行计算
      var company = com_nation + com_personal + com_three;
      var bussiness = bus_high + bus_tech + bus_mid + bus_other;

      // 按照需求排序 big_term term num
      return [
        sum,
        party,
        bussiness,
        company,
        arm,
        other,
        bus_high,
        bus_tech,
        bus_mid,
        bus_other,
        com_nation,
        com_personal,
        com_three,
      ];
    },
    get_direction(start, end) {
      this.axios({
        url: "grad/org_kind",
        method: "get",
        params: {
          start: start,
          end: end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          var bachelor = this.count_kind(res.data.data.bachelor);
          var master = this.count_kind(res.data.data.master);
          var sum = [];
          var bac_percent = [];
          var mas_percent = [];
          var sum_percent = [];
          for (var i in bachelor) {
            sum.push(bachelor[i] + master[i]);
            bac_percent.push(
              ((bachelor[i] / bachelor[0]) * 100).toFixed(2) + " %"
            );
            mas_percent.push(((master[i] / master[0]) * 100).toFixed(2) + " %");
            sum_percent.push(
              (
                ((bachelor[i] + master[i]) / (bachelor[0] + master[0])) *
                100
              ).toFixed(2) + " %"
            );
          }
          var title = [
            "党政机关",
            "事业单位",
            "企业单位",
            "部队",
            "高等教育单位",
            "科研设计单位",
            "中初教育单位",
            "其他事业单位",
            "国有企业",
            "民营企业",
            "三资企业",
          ];
          // 组织数据
          var table = [];
          for (var i = 0; i < 8; i++) {
            var temp = {
              aim: "1",
              item: "1",
              bach_num: "1",
              mas_num: "1",
              sum_num: "1",
              bac_percent: "1",
              mas_percent: "1",
              sum_percent: "1",
            };
            table[i] = temp;
          }

          // 党政机关
          table[0].aim = title[0];
          table[0].item = title[0];
          table[0].bach_num = bachelor[1];
          table[0].mas_num = master[1];
          table[0].sum_num = sum[1];
          table[0].bac_percent = bac_percent[1];
          table[0].mas_percent = mas_percent[1];
          table[0].sum_percent = sum_percent[1];
          // 事业单位
          for (var i = 1; i < 3; i++) {
            table[i].aim = title[1];
            table[i].item = title[i + 3];
            table[i].bach_num = bachelor[i + 5];
            table[i].mas_num = master[i + 5];
            table[i].sum_num = sum[i + 5];
            table[i].bac_percent = bac_percent[i + 5];
            table[i].mas_percent = mas_percent[i + 5];
            table[i].sum_percent = sum_percent[i + 5];
          }
          for (var i = 3; i < 4; i++) {
            table[i].aim = title[1];
            table[i].item = title[i + 4];
            table[i].bach_num = bachelor[i + 6];
            table[i].mas_num = master[i + 6];
            table[i].sum_num = sum[i + 6];
            table[i].bac_percent = bac_percent[i + 6];
            table[i].mas_percent = mas_percent[i + 6];
            table[i].sum_percent = sum_percent[i + 6];
          }
          // 企业单位
          for (var i = 4; i < 7; i++) {
            table[i].aim = title[2];
            table[i].item = title[i + 4];
            table[i].bach_num = bachelor[i + 6];
            table[i].mas_num = master[i + 6];
            table[i].sum_num = sum[i + 6];
            table[i].bac_percent = bac_percent[i + 6];
            table[i].mas_percent = mas_percent[i + 6];
            table[i].sum_percent = sum_percent[i + 6];
          }
          // 部队
          table[7].aim = title[3];
          table[7].item = title[3];
          table[7].bach_num = bachelor[4];
          table[7].mas_num = master[4];
          table[7].sum_num = sum[4];
          table[7].bac_percent = bac_percent[4];
          table[7].mas_percent = mas_percent[4];
          table[7].sum_percent = sum_percent[4];
          this.tableData = table;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scope>
.panel-group {
  margin-top: 5%;
  height: 20%;
  width: 100%;
  margin-bottom: 10%;
}
.panel-group .table-panel-col {
  margin-bottom: 32px;
}
.panel-group .table-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 200px;
}
.panel-group .table-panel .table-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.panel-group .table-panel .table-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
